<template>
  <div class="login">
    <img class="login-bg" src="@/assets/images/image(25).png" alt="" />
    <div class="login-card">
      <div class="login-card-logo">
        <img class="login-card-logo-img" src="@/assets/images/image(31).png" />
      </div>
      <div class="login-card-body">
        <img class="login-card-body-img" src="@/assets/images/image(24).png" />
        <div class="login-card-body-block">
          <div class="login-card-body-block-title">立即注册</div>
          <div class="login-card-body-block-input">
            <img
              class="login-card-body-block-input-icon"
              src="@/assets/images/image(18).png"
            />
            <el-input
              placeholder="请输入您的账号"
              v-model="field.formData.loginName"
            ></el-input>
          </div>
          <div class="login-card-body-block-input">
            <img
              class="login-card-body-block-input-icon"
              src="@/assets/images/image(15).png"
            />
            <el-input
              type="password"
              placeholder="请输入验证码"
              v-model="field.formData.code"
            ></el-input>
            <div class="login-card-body-block-input-code">获取验证码</div>
          </div>
          <div class="login-card-body-block-input">
            <img
              class="login-card-body-block-input-icon"
              src="@/assets/images/image(14).png"
            />
            <el-input
              type="password"
              placeholder="请输入您的密码"
              v-model="field.formData.password"
            ></el-input>
          </div>
          <div class="login-card-body-block-input">
            <img
              class="login-card-body-block-input-icon"
              src="@/assets/images/image(14).png"
            />
            <el-input
              type="password"
              placeholder="请确认您的密码"
              v-model="field.formData.repassword"
            ></el-input>
          </div>
          <div
            class="login-card-body-block-confirm"
            @click="field.handleConfirm"
          >
            立即注册
          </div>
          <div class="login-card-body-block-tag" @click="field.handleRegister">
            立即登录
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// import { ToastBottom, setObj, getObj } from "@/utils/index";
import { onMounted, reactive, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
//获取路由
const $_route = useRoute();
const $_router = useRouter();
//获取接口
const $_api = inject("$api");
onMounted(() => {
  console.log($_api);
});
const field = reactive({
  formData: {
    loginName: "",
    password: "",
    repassword: "",
    code: "",
  },
  handleConfirm: async () => {
    console.log(field.formData);
    const results = await $_api.register(field.formData);
    if (results && results.status > 0) {
      ElMessage.success(results.info);
      console.log(results);
      setTimeout(() => {
        $_router.replace({
          path: "/login",
        });
      }, 1000);
    }
  },
  handleRegister: () => {
    $_router.replace({
      path: "/login",
    });
  },
});
// const
</script>

<style lang="scss" scoped>
.login {
  @include flex(center, center);
  //   flex-direction: column;
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  background: #fff;
}
.login-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.login-card {
  @include flex(flex-start, center);
  flex-direction: column;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  height: 700px;
  background: #ffffff;
  border-radius: 20px;
  z-index: 9;
  @media only screen and (max-width: 1200px) {
    height: 600px;
  }
}
.login-card-logo {
  @include flex(flex-start, center);
  width: 100%;
}
.login-card-logo-img {
  width: 306px;
  height: 80px;
}
.login-card-body {
  @include flex(center, flex-start);
  padding: 68px 37px 80px 106px;
  box-sizing: border-box;
  width: 100%;
  flex-grow: 1;
}
.login-card-body-img {
  margin-top: 24px;
  width: 393px;
  height: 372px;
  @media only screen and (max-width: 1200px) {
    width: 235.8px;
    height: 223.2px;
  }
}
.login-card-body-block {
  @include flex(center, flex-start);
  flex-direction: column;
  margin-left: 120px;
  padding: 0 85px;
  box-sizing: border-box;
  width: 500px;
  height: 100%;
  border: 1px solid #e1e1e1;
  @media only screen and (max-width: 1200px) {
    padding: 0 50px;
    width: 300px;
  }
}
.login-card-body-block-title {
  margin-bottom: 10px;
  width: 100%;
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #2f2f2f;
  line-height: 25px;
  text-align: left;
}
.login-card-body-block-input {
  @include flex(flex-start, center);
  margin-bottom: 10px;
  width: 100%;
  height: 40px;
  background: #ffffff;
  border: 1px solid #e1e1e1;
}
.login-card-body-block-input-icon {
  flex-shrink: 0;
  margin: 0 10px;
  width: 16px;
  height: 19px;
}
.login-card-body-block-input-code {
  flex-shrink: 0;
  margin: 0 10px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
  line-height: 22px;
}
.login-card-body-block-confirm {
  margin-top: 10px;
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background: #df7935;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.login-card-body-block-tag {
  margin-top: 15px;
  width: 100%;
  text-align: right;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #9e9e9e;
  line-height: 22px;
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
.login-card-body-block-input :deep(.el-input__inner) {
  border-radius: 0;
  border: none;
  padding: 0;
}
</style>
